<!--港口场地管理界面-->
<template>
	<el-table :data="tableData" border style="width: 100%">
		<el-table-column prop="did" label="仓库号" width="180" text-align="content-center" />
		<el-table-column prop="volume" label="剩余容量" />
		<el-table-column label="操作" #default="{ row }">
			<el-button type="primary" icon="ele-Edit" plain @click="getdetail(row)">查看详情</el-button>
		</el-table-column>
	</el-table>
	<el-dialog v-model="dialogTableVisible" title="仓储详情" width="80%">
		<el-table :data="gridData">
			<el-table-column property="did" label="仓库号" />
			<el-table-column property="gid" label="货物号" />
			<el-table-column property="num" label="现存数量" />
			<el-table-column property="in_time" label="入库时间" />
		</el-table>
	</el-dialog>
</template>

<script lang="ts" >
import { defineComponent, ref } from 'vue';
import { getDeport, getMessage } from '/@/api/deport/index';
export default defineComponent({
	name: 'deport',
	setup() {
		const tableData = ref([]);
		const queryForm = ref({
			query: '',
			pagenum: 1,
			pagesize: 1000,
		});
		const initgetDeportList = async () => {
			const res = await getDeport(queryForm.value);
			tableData.value = res.data.value;
		};
		initgetDeportList();

		const updateDia = () => {
			dialogTableVisible.value = !dialogTableVisible.value;
		};

		const dialogTableVisible = ref(false);
		const gridData = ref([]);

		const getdetail = async(row: any)=>{
			dialogTableVisible.value = !dialogTableVisible.value;
			queryForm.value.query = row.did
			const res = await getMessage(queryForm.value)
			gridData.value = res.data.value;
		}
		return {
			tableData,
			queryForm,
			initgetDeportList,
			updateDia,
			dialogTableVisible,
			gridData,
			getdetail,
		};
	},
});
</script>

<style lang="scss" scoped>

</style>
